<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

const dataLoading = ref(true);

// 模拟数据
const statisticsData = ref({
  totalMembers: 2458,
  newMembersToday: 35,
  ordersToday: 128,
  revenue: 15680
});

// 加载图表数据
onMounted(() => {
  setTimeout(() => {
    dataLoading.value = false;
    initOrderChart();
    initRevenueChart();
  }, 1000);
});

// 初始化订单趋势图表
const initOrderChart = () => {
  const chartDom = document.getElementById('orderChart');
  const myChart = echarts.init(chartDom);
  
  const option = {
    title: {
      text: '订单数量趋势',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [120, 132, 101, 134, 90, 230, 210],
        type: 'line',
        smooth: true
      }
    ]
  };
  
  myChart.setOption(option);
  
  // 响应式调整
  window.addEventListener('resize', () => {
    myChart.resize();
  });
};

// 初始化营收趋势图表
const initRevenueChart = () => {
  const chartDom = document.getElementById('revenueChart');
  const myChart = echarts.init(chartDom);
  
  const option = {
    title: {
      text: '营收趋势(近7天)',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [11200, 13200, 10100, 13400, 9000, 23000, 21000],
        type: 'bar',
        color: '#409EFF'
      }
    ]
  };
  
  myChart.setOption(option);
  
  // 响应式调整
  window.addEventListener('resize', () => {
    myChart.resize();
  });
};
</script>

<template>
  <div class="dashboard-container">
    <el-row :gutter="20">
      <el-col :span="24">
        <div class="page-header">
          <h2>首页仪表盘</h2>
        </div>
      </el-col>
    </el-row>
    
    <!-- 统计卡片 -->
    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :md="6">
        <el-card shadow="hover" class="data-card">
          <template #header>
            <div class="card-header">
              <span>会员总数</span>
              <el-icon><UserFilled /></el-icon>
            </div>
          </template>
          <div v-loading="dataLoading" class="card-data">
            {{ statisticsData.totalMembers }}
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :sm="12" :md="6">
        <el-card shadow="hover" class="data-card">
          <template #header>
            <div class="card-header">
              <span>今日新增会员</span>
              <el-icon><User /></el-icon>
            </div>
          </template>
          <div v-loading="dataLoading" class="card-data">
            {{ statisticsData.newMembersToday }}
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :sm="12" :md="6">
        <el-card shadow="hover" class="data-card">
          <template #header>
            <div class="card-header">
              <span>今日订单数</span>
              <el-icon><ShoppingCart /></el-icon>
            </div>
          </template>
          <div v-loading="dataLoading" class="card-data">
            {{ statisticsData.ordersToday }}
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :sm="12" :md="6">
        <el-card shadow="hover" class="data-card">
          <template #header>
            <div class="card-header">
              <span>今日营业额(元)</span>
              <el-icon><Money /></el-icon>
            </div>
          </template>
          <div v-loading="dataLoading" class="card-data">
            {{ statisticsData.revenue }}
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 图表区域 -->
    <el-row :gutter="20" class="chart-row">
      <el-col :xs="24" :lg="12">
        <el-card shadow="hover" class="chart-card">
          <div v-loading="dataLoading" id="orderChart" class="chart"></div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :lg="12">
        <el-card shadow="hover" class="chart-card">
          <div v-loading="dataLoading" id="revenueChart" class="chart"></div>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 快捷功能区 -->
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>快捷功能</span>
            </div>
          </template>
          <div class="shortcut-container">
            <el-button type="primary" class="shortcut-btn" @click="$router.push('/member')">
              <el-icon><User /></el-icon>
              会员管理
            </el-button>
            <el-button type="success" class="shortcut-btn" @click="$router.push('/order')">
              <el-icon><ShoppingCart /></el-icon>
              订单管理
            </el-button>
            <el-button type="warning" class="shortcut-btn" @click="$router.push('/coupon')">
              <el-icon><Tickets /></el-icon>
              优惠券管理
            </el-button>
            <el-button type="danger" class="shortcut-btn" @click="$router.push('/reservation')">
              <el-icon><Calendar /></el-icon>
              预约管理
            </el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
.dashboard-container {
  padding: 20px;
}
.page-header {
  margin-bottom: 20px;
}
.data-card {
  margin-bottom: 20px;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.card-data {
  font-size: 32px;
  font-weight: bold;
  color: #409EFF;
  text-align: center;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chart-row {
  margin: 20px 0;
}
.chart-card {
  margin-bottom: 20px;
}
.chart {
  height: 350px;
}
.shortcut-container {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}
.shortcut-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 120px;
}
</style> 
